import React from "react";

import ReactTypes from "prop-types";
//方式一：父组件传递到孙组,通过props逐层传递过去

// export default class Com1 extends React.Component {
//   constructor(props) {
//     super(props);
//     this.state = {
//       color: "red",
//     };
//   }
//   render() {
//     return (
//       <div>
//         <h1>
//           父组件
//           <Com2 color={this.state.color}></Com2>
//         </h1>
//       </div>
//     );
//   }
// }

// class Com2 extends React.Component {
//   render() {
//     console.log(this.props);
//     return (
//       <div>
//         <h2>
//           子组件
//           <Com3 color={this.props.color}></Com3>
//         </h2>
//       </div>
//     );
//   }
// }

// class Com3 extends React.Component {
//   render() {
//     return (
//       <div>
//         <h3 style={{ color: this.props.color }}>孙组件</h3>
//       </div>
//     );
//   }
// }

// 方式二 通过context传递

export default class Com1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      color: "red",
    };
  }
  render() {
    return (
      <div>
        <h1>父组件</h1>
        <Com2></Com2>
      </div>
    );
  }
  // context启用：在父组件中，使用固定的方法，内部返回的数据---可以供所用的子孙组件使用
  getChildContext() {
    return {
      color: this.state.color,
    };
  }
  // 使用数据属性类型设定
  static childContextTypes = {
    color: ReactTypes.string,
  };
}

class Com2 extends React.Component {
  render() {
    console.log(this.props);
    return (
      <div>
        <h2>子组件</h2>
        <Com3></Com3>
      </div>
    );
  }
}

class Com3 extends React.Component {
  //校验传递过来的参数类型
  static contextTypes = {
    color: ReactTypes.string,
  };
  render() {
    return (
      <div>
        <h3 style={{ color: this.context.color }}>
          孙组件---{this.context.color}
        </h3>
      </div>
    );
  }
}
